{% extends "base.html" %}

{% block title %} 博客 {% endblock %}
{% block page_content %}
<div class="page-header col-lg-12">
    <div class="col-md-12">
        <h1>{{ post.title }}</h1>
    </div>

</div>
<div class="under_title col-md-12">
    <span class="post-timestamp">
        <span class="glyphicon glyphicon-calendar"></span>
        {{ moment(post.timestamp).format('LL') }}
    </span>
    <span class="post-last_timestamp">
        <span class="glyphicon glyphicon-floppy-saved"></span>
        {{ moment(post.last_timestamp).format('LL') }}
    </span>
    <span class="post-username">
        <a href="{{ url_for('.user',username=post.author.username) }}">
            <span class="glyphicon glyphicon-user"></span>
            {{ post.author.username }}
        </a>
    </span>
    {% if post.post_type.name %}
    <span class="post-username">
        <a href="{{ url_for('.posttype',id=post.post_type.id) }}"><span class="post-datetime"><span
                    class="glyphicon glyphicon-filter"></span>
                {{ post.post_type.name }}
            </span></a>
    </span>
    {% endif %}
    <span class="post-modify">
        {% if post.author == current_user or current_user.is_administrator() %}
        <a href="{{ url_for('.edit',id=post.id) }}">
            <span class="glyphicon glyphicon-edit"></span>
            {% if current_user.is_administrator() %}
            修改文件(管理员)
            {% else %}
            修改文件
            {% endif%}
        </a>
        {% endif %}
    </span>
</div>


<div class="" id='test-editormd'>
    {{ post.content|md|safe }}
</div>
<div id="to-top" class="">
    <span class="glyphicon glyphicon-arrow-up"></span>
</div>

{% endblock %}
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{{ moment.lang('zh-CN') }}
<script src="{{ url_for('static',filename='editormd/examples/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='editormd/lib/prettify.min.js') }}"></script>
<script src="{{ url_for('static', filename='editormd/lib/marked.min.js') }}"></script>
<script src="{{ url_for('static', filename='editormd/lib/raphael.min.js') }}"></script>
<script src="{{ url_for('static', filename='editormd/lib/underscore.min.js') }}"></script>
<script src="{{ url_for('static', filename='editormd/lib/sequence-diagram.min.js') }}"></script>
<script src="{{ url_for('static', filename='editormd/lib/flowchart.min.js') }}"></script>
<script src="{{ url_for('static', filename='editormd/lib/jquery.flowchart.min.js') }}"></script>
<script src="{{ url_for('static', filename='editormd/editormd.min.js') }}"></script>
<link href="{{ url_for('static', filename='editormd/css/editormd.min.css') }}" rel="stylesheet" />
<link href="{{ url_for('static', filename='editormd/css/editormd.preview.css') }}" rel="stylesheet" />
<script type="text/javascript" src="{{ url_for('static',filename='toc-master/js/jquery-1.4.4.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='toc-master/js/jquery.ztree.core-3.5.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='toc-master/src/ztree_toc.js') }}"></script>
<script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='toc-master/css/zTreeStyle/zTreeStyle.css') }}"
    type="text/css">
</link>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css" type="text/css">
</link>
<!--以下是js部分 -->
<script type="text/javascript">
    $(function () {
        $('#to-top').fadeOut('fast') // 默认隐藏就完事了，因为我写的是监听滚轮事件，如果高度不高，压根没有滚轮
        var testEditormdView, testEditormdView2;
        testEditormdView = editormd.markdownToHTML("test-editormd", {
            // markdown: markdown,//+ "\r\n" + $("#append-test").text(),
            //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            // toc: true,
            tocm: true,    // Using [TOCM]
            //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
            //gfm             : false,
            // tocDropdown: true,
            // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
        $('#tree-toc').ztree_toc({
            debug: false,
            is_auto_number: false,
            is_expand_all: false,
            documment_selector: '#test-editormd',
            ztreeStyle: {
                margin: "60px 0 0 0",
                width: '16%',
                overflow: 'auto',
                'z-index': 2147483647,
                border: '0px none',
                position: "fixed",
                top: "100px",
                left: "0"
            }
        });
        $('#to-top').dblclick(function () {
            $('html,body').animate({ scrollTop: 0 }, 'slow');
        });
        $('#to-top').draggable()
        // console.log($(window).scrollTop())
        $(window).scroll(function () {
            //获取滚动条滚动的位置
            if ($(window).scrollTop() > $(window).height()) {
                // 滚动条的位置大于当前页面的高度，就出现to-top按钮
                $('#to-top').fadeIn('fast')
            } else {
                $('#to-top').fadeOut('fast')
            }
        })
    });
    $(init);
    function init() {
        $('#to-top').draggable();
        // 使用jq-ui 实现可拖拽
    }


</script>
{% endblock %}